<template>
  <div>
    <search-bar placeHolder="请输入公司名称/负责人"
                @handleSearch='init'></search-bar>
    <el-table :data="joinShopList">
      <el-table-column label="维修厂名称"
                       align="center"
                       prop="company">
      </el-table-column>
      <el-table-column label="负责人"
                       align="center"
                       prop="leader">
      </el-table-column>
      <el-table-column label="联系电话"
                       align="center"
                       prop="phone">
      </el-table-column>
      <el-table-column label="联系电话"
                       align="center"
                       prop="phone">
      </el-table-column>
      <el-table-column label="总收入"
                       align="center">
        <template slot-scope="scope">
          <el-button type="text"
                     @click="dialogState.incomeVisible=true,sid=scope.row.sid,handleClick()">{{scope.row.income}}元</el-button>
        </template>
      </el-table-column>
      <el-table-column label="总支出"
                       align="center">
        <template slot-scope="scope">
          {{scope.row.expenditure}}元
        </template>
      </el-table-column>
      <el-table-column label="总提现"
                       align="center">
        <template slot-scope="scope">
          <el-button type="text"
                     @click='dialogState.CashVisible=true,CashData(scope.row)'>{{scope.row.cashmoney}}元</el-button>
        </template>
      </el-table-column>
      <el-table-column label="纯利"
                       align="center">
        <template slot-scope="scope">
          {{scope.row.Balance}}元
        </template>
      </el-table-column>
      <el-table-column label="开通时间"
                       align="center"
                       prop="audit_time">
      </el-table-column>
    </el-table>
    <v-dialog title="总收入详情"
              :show.sync='dialogState.incomeVisible'>
      <el-tabs v-model="activeName"
               @tab-click="handleClick">
        <el-tab-pane label="售卡"
                     name="card">
          <v-table :tableData='tableData'
                   :page.sync='details.page'
                   :total='details.total'
                   :tableLabel="[{label:'邦保养卡号',prop:'card_number'},{label:'车主姓名',prop:'name'},{label:'联系电话',prop:'phone'},{label:'车牌号',prop:'plate'},{label:'车辆类型',prop:'car_type'},{label:'车排量',prop:'series'},{label:'用油名称',prop:'oil_name'},{label:'卡类型',prop:'card_type'},{label:'卡金额',prop:'card_price'},{label:'售卡时间',prop:'sale_time'},{label:'剩余次数',prop:'remain_times'}]">
          </v-table>
        </el-tab-pane>
        <el-tab-pane label="好评"
                     name="praise">
          <v-table :tableData='tableData'
                   :page.sync='details.page'
                   :total='details.total'
                   :tableLabel="[{label:'邦保养卡号',prop:'card_number'},{label:'车主姓名',prop:'name'},{label:'联系电话',prop:'phone'},{label:'车牌号',prop:'plate'},{label:'车辆类型',prop:'car_type'},{label:'车排量',prop:'series'},{label:'用油名称',prop:'oil_name'},{label:'好评奖励',prop:'money'},{label:'好评时间',prop:'create_time'}]">
          </v-table>
        </el-tab-pane>
        <el-tab-pane label="服务费"
                     name="Service">
          <v-table :tableData='tableData'
                   :page.sync='details.page'
                   :total='details.total'
                   :tableLabel="[{label:'邦保养卡号',prop:'card_number'},{label:'车主姓名',prop:'name'},{label:'联系电话',prop:'phone'},{label:'车牌号',prop:'plate'},{label:'车辆类型',prop:'car_type'},{label:'车排量',prop:'series'},{label:'用油名称',prop:'oil_name'},{label:'卡类型',prop:'card_type'},{label:'服务费',prop:'hour_charge'},{label:'服务时间',prop:'create_time'},{label:'剩余次数',prop:'remain_times'}]">
          </v-table>
        </el-tab-pane>
        <el-tab-pane label="活动奖励"
                     name="activity">
          <v-table :tableData='tableData'
                   :page.sync='details.page'
                   :total='details.total'
                   :tableLabel="[{label:'活动标题',prop:'title'},{label:'活动内容',prop:'content'},{label:'活动开始时间',prop:'start_time'},{label:'活动结束时间',prop:'end_time'},{label:'活动发起人',prop:'create_person'},{label:'活动奖励金额',prop:'award'},{label:'奖励时间',prop:'award_time'}]">
          </v-table>
        </el-tab-pane>
      </el-tabs>
    </v-dialog>
    <v-dialog title="提现详情"
              :show.sync='dialogState.CashVisible'>
      <v-table :tableData='tableData'
               :page.sync='details.page'
               :total='details.total'
               :tableLabel="[{label:'提现金额',prop:'money'},{label:'申请时间',prop:'create_time'},{label:'余额',prop:'sur_amount'},{label:'状态',prop:'audit_status'},{label:'审核人',prop:'audit_person'},{label:'通过时间',prop:'audit_time'}]">

      </v-table>
    </v-dialog>
    <v-pagination :total='total'
                  :page.sync='page'
                  @pagination='init' />
  </div>
</template>
<script>
export default {
  data () {
    return {
      joinShopList: [],
      page: 1, //当前页,
      total: 0, //总页数
      dialogState: {
        incomeVisible: false, //总收入详情弹框
        CashVisible: false, //提现
      },
      activeName: 'card',
      sid: '', //维修厂id,
      tableData: [],
      details: {
        page: 1,
        total: 0
      },
    }
  },
  methods: {
    async init (data) {  //加盟维修厂列表
      try {
        const res = await this.api.joinShopList(Object.assign({}, data, { page: this.page }))
        this.joinShopList = res.data.list || []
        this.total = res.data.rows || 0
      } catch (err) {
        throw (err)
      }
    },
    async handleClick () {   //总收入详情
      try {
        const data = Object.assign({}, { sid: this.sid, page: this.page })
        const res = this.activeName === 'card' ? await this.api.joinShopCard(data) : this.activeName === 'praise' ? await this.api.joinGoodIncome(data) : await this.activeName === 'Service' ? await this.api.joinServiceIncome(data) : await this.api.joinActionIncome(data)
        this.tableData = res.data.list || []
        this.details.total = res.data.rows || 0
      } catch (err) {
        throw (err)
      }
    },
    async CashData (row) {  //提现详情
      try {
        const res = await this.api.joinCash({ sid: row.sid, page: this.details.page }) //sid 维修厂id
        this.tableData = res.data.list || []
        this.details.total = res.data.rows || 0
      } catch (err) {
        throw (err)
      }
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style>
</style>
